<template>
  <div class="index-box" ref="index">
        <div class="menuList" ref="menuList">
          <div class="menu-item" :class="[item.orderStatus==searchForm.orderStatus?'active':'']"  @click="handleItem(item.orderStatus)" v-for="(item,index) in menuList">
            <div class="numberBox">
              <span class="number">{{item.orderCount}}<!-- <span class="tipsNumber">9</span> --></span>
            </div>
            <div class="text">{{item.statusName}}</div>
          </div>
        </div>
        <div class="search" ref="search">
         <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
           class="demo-form-inline" id="searchBox">
           <el-form-item prop="orderCode">
               <el-input v-model="searchForm.orderCode" clearable placeholder="订单编号"></el-input>
           </el-form-item>
           <el-form-item prop="goodsName">
               <el-input v-model="searchForm.goodsName" clearable placeholder="商品名称"></el-input>
           </el-form-item>
           <el-form-item prop="telephone">
               <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
           </el-form-item>
           <el-form-item prop="orderTime">
             <el-date-picker v-model="orderTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>


           <el-form-item class="clearfix">
             <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
             <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
             <el-button
               style="margin-left:10px"
               type="warning"
               icon="el-icon-download"
               size="small"
               :loading="btnLoading"
               @click="handleExport"
             >导出</el-button>
           </el-form-item>

           <el-form-item style="margin-left: auto;">
              <MyRefresh/>
            <!--  <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
           </el-form-item>
         </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;" v-loading="loading"  border :height="tableHeight">
            <el-table-column prop="orderCode" label="订单编号" width="220" align="center"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称"  align="center"></el-table-column>
        		<el-table-column prop="goodsNum" label="数量"  align="center" width="160"></el-table-column>
            <el-table-column prop="actualPayPrice" label="实际支付（元）"  align="center" width="160"></el-table-column>
            <el-table-column prop="" label="订单信息" align="center" width="250">
              <template #default="scope">
                  <div>{{scope.row.nickname}}</div>
                  <div>{{scope.row.telephone}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="订单备注" show-overflow-tooltip align="center" width="250"></el-table-column>
             <el-table-column prop="createTime" label="下单时间"  align="center" width="170">
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
            <el-table-column prop="" label="状态" align="center"  width="160">
              <template slot-scope="scope">
                <div class="tagBox" >
                  <el-tag v-if="scope.row.orderStatus=='1'" type="primary" >待支付</el-tag>
                  <el-tag v-else-if="scope.row.orderStatus=='2'" type="primary" >待核销</el-tag>
                  <el-tag v-else-if="scope.row.orderStatus=='3'" type="success" >已完成</el-tag>
                  <el-tag v-else-if="scope.row.orderStatus=='4'" type="info" >取消订单</el-tag>
                  <el-tag v-else-if="scope.row.orderStatus=='5'" type="info" >退款成功</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="160"   align="center" fixed="right">
               <template slot-scope="scope">
                <el-button
                  size="medium"
                  type="text"
                  icon="el-icon-view"
                  @click="handleLook(scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>

    <!-- 订单详情 -->
    <el-dialog title="订单详情" width="800px" v-dialogDrag :close-on-click-modal="false" :visible.sync="orderDetailVisible" @close="orderDetailVisible = false">
      <el-descriptions title=""  :column="1" border >
        <el-descriptions-item label="商品编号">{{orderDetail.orderCode}}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{orderDetail.goodsName}}</el-descriptions-item>
        <el-descriptions-item label="数量">{{orderDetail.goodsNum}}</el-descriptions-item>
        <el-descriptions-item label="实际支付（元）">{{orderDetail.actualPayPrice}}</el-descriptions-item>
        <el-descriptions-item label="下单用户信息">
          <div>{{orderDetail.nickname}}</div>
          <div>{{orderDetail.telephone}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{parseTime(orderDetail.createTime)}}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="orderDetail.orderStatus=='1'" type="primary" >待支付</el-tag>
          <el-tag v-else-if="orderDetail.orderStatus=='2'" type="primary" >待核销</el-tag>
          <el-tag v-else-if="orderDetail.orderStatus=='3'" type="success" >已完成</el-tag>
          <el-tag v-else-if="orderDetail.orderStatus=='4'" type="info" >取消订单</el-tag>
          <el-tag v-else-if="orderDetail.orderStatus=='5'" type="info" >退款成功</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderDetailVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import { getOrderList, getOrderStatusCount,orderExport  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        menuIndexStatus:'0',
        menuList:[
          {msg: "全部订单", count: 0, orderStatus: 0},
          {msg: "待支付", count: 0, orderStatus: 1},
          {msg: "待核销", count: 0, orderStatus: 2},
          {msg: "已完成", count: 0, orderStatus: 3},
          {msg: "取消订单", count: 0, orderStatus: 4},
          {msg: "退款成功", count: 0, orderStatus: 5}],
        orderTime:[],
        searchForm: {
          orderCode: '',
          goodsName: '',
          telephone: '',
          orderStatus:'0',

          pageNum: 1,
          pageSize: 20,
        },
        topData:{},
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:400,//table 高度
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',
        orderDetailVisible: false,
        orderDetail:{},


      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
       this.dataInfo();
       this.getTop();
    },
    methods: {
      handleLook(row){
        this.orderDetail = row;
        this.orderDetailVisible = true;
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.orderTime,'startTime','endTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return orderExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },

      getTop(){
        this.$nextTick(() => {
            this.tableHeight = this.$refs.index.offsetHeight - this.$refs.menuList.offsetHeight  - this.$refs.search.offsetHeight - this.$refs.page.offsetHeight - 105;
        })
        getOrderStatusCount().then(res=>{
          if (res.code == 200) {
            //this.menuList = res.data;
            let data = res.data;
            let topData = [{statusName:"全部订单",orderStatus:0,orderCount:0}];
            let total = 0;
            for(let i=0;i<data.length;i++){
              total += Number(data[i].orderCount)
            }
            console.log(total)
            topData[0].orderCount = total;
            this.menuList = topData.concat(res.data)
          }
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.orderTime = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleItem(id){
        this.searchForm.orderStatus = id;
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.orderTime,'startTime','endTime');
          this.loading = true;
          const result = await getOrderList(data);
          if (result.code == 200) {
            this.total = result.total;
            let data = result.rows;
            this.dataList = data;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
    }
  }
</script>

<style scoped lang="scss">
  .activeCheckedBox{
    border-top: 1px solid #ddd;
    padding:10px;
    height:52px;
    .el-tag{
      margin-right:10px;
    }
  }
  .menuList{
    display: flex;
    margin-bottom: 15px;
    .menu-item{
      flex:1;
      padding:20px 20px 10px 20px;
      border:1px solid #DCDFE6;
      border-right: none;
      cursor: pointer;
      .numberBox{
        display:flex;
        justify-content:center;
      }
      .tipsNumber{
         font-size: 12px;
         height: 18px;
         line-height: 18px;
         padding: 0 6px;
         text-align: center;
         white-space: nowrap;
         position:absolute;
         background:#FF2F43;
         border-radius: 10px;
         right: -16px;
         top: -6px;
         color:#fff;
      }
      .number{
        font-size: 32px;
        position:relative;
      }
      .text{
        font-size: 16px;
        color:#333333;
        text-align: center;
      }
    }
  }
  .menuList .menu-item:last-child{
    border-right: 1px solid #DCDFE6;
  }
  .menuList .menu-item:hover{
    background-color:#D8E4DD;
  }
  .menuList .menu-item.active{
    background-color: #D8E4DD;
  }
  .formDialog /deep/ .el-form-item{
    margin-bottom: 5px;
  }

  .table /deep/ .el-table__expanded-cell{
   background: #FAFCFB;
    padding:0 50px;
  }
  .table /deep/ .el-table__expanded-cell:hover{
   background: #FAFCFB!important;
  }
  .table /deep/ .el-table__expanded-cell .el-form-item{
    margin-bottom: 0px;
    margin-right: 30px;
  }
  .table /deep/ .el-table__expanded-cell .el-form-item__label,.table /deep/ .el-table__expanded-cell .el-form-item__content{
     height: 54px;
     line-height: 54px;
  }
</style>
